import { FC } from 'react';
import styles from './styles.module.less';
import { useNavigate } from 'react-router-dom';

const News: FC = () => {
  const navigate = useNavigate();

  const handlerClick = () => {
    navigate({
      pathname: '/p/123',
    });
  };

  return (
    <section className={styles.news}>
      <div className={styles.container}>
        <div className={styles.row}>
          <div className={styles.left}>
            <div className={styles.leftWrap}>
              <ul className={styles.newsList}>
                <li className={styles.newsItem}>
                  <div className={styles.newTitle} onClick={handlerClick}>
                    大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?
                  </div>
                  <div className={styles.comment}>发布日期：2019.04.01&nbsp;分类：动态资讯</div>
                  <div className={styles.post_exce}>
                    <p>设计师必备歌单： </p>
                  </div>
                </li>
                <li className={styles.newsItem}>
                  <div className={styles.newTitle}>立足大湾区、链接长三角,京东快递航空战略新版图</div>
                  <div className={styles.comment}>发布日期：2019.04.01&nbsp;分类：动态资讯</div>
                  <div className={styles.post_exce}>
                    <p>
                      客户：先谢谢你了，能想象一下一块圆形的黑金属在一点钟方向向着八点钟的位子以闪电的弧度裂开然后黑金属两瓣分别上下稍微分离的感觉吗？
                      <br />
                      设计狮：您这个好复杂啊，有草图吗？
                    </p>
                  </div>
                </li>
                <li className={styles.newsItem}>
                  <div className={styles.newTitle}>大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?</div>
                  <div className={styles.comment}>发布日期：2019.04.01&nbsp;分类：动态资讯</div>
                  <div className={styles.post_exce}>
                    <p>设计师必备歌单： </p>
                  </div>
                </li>
                <li className={styles.newsItem}>
                  <div className={styles.newTitle}>立足大湾区、链接长三角,京东快递航空战略新版图</div>
                  <div className={styles.comment}>发布日期：2019.04.01&nbsp;分类：动态资讯</div>
                  <div className={styles.post_exce}>
                    <p>
                      客户：先谢谢你了，能想象一下一块圆形的黑金属在一点钟方向向着八点钟的位子以闪电的弧度裂开然后黑金属两瓣分别上下稍微分离的感觉吗？
                      <br />
                      设计狮：您这个好复杂啊，有草图吗？
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.rightWrap}>
              <div className={styles.input}>
                <input type="text" placeholder="请输入需要搜索的文字" />
              </div>
              <div className={styles.newsTitle}>热门资讯</div>
              <div className={styles.newsList}>
                <ul>
                  <li>
                    <div className={styles.post_title}>大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?</div>
                  </li>
                  <li>
                    <div className={styles.post_title}>立足大湾区、链接长三角,京东快递航空战略新版图</div>
                  </li>
                  <li>
                    <div className={styles.post_title}>推广新能源车辆走绿色发展</div>
                  </li>
                  <li>
                    <div className={styles.post_title}>电子商务促进快递行业发展</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default News;
